<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: Basics</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JavaScript: Basics</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex.Kolonitsky@gmail.com</p>
        <p><a href="http://javascript-learning-courses.googlecode.com">http://javascript-learning-courses.googlecode.com</a></p>
    </div>
</div>

<div class="slide">
    <h1>Функции</h1>

    <pre class="brush: js">
        function addSquares(a,b) {
           function square(x) {
              return x * x;
           }
           return square(a) + square(b);
        }

        console.log(addSquares(2,3)); // returns 13
        console.log(addSquares(3,4)); // returns 25
        console.log(addSquares(4,5)); // returns 41
    </pre>
</div>

<!-- Function creation -->
<div class="slide">
    <h1>Функции: Создание</h1>

    <dl class="incremental">
        <dt>Declaration</dt>
        <dd>
            <pre class="brush: js">
                function name(params) { ... }
            </pre>
        </dd>

        <dt>Expression</dt>
        <dd>
            <pre class="brush: js">
                var name = function(params) { ... }
            </pre>
        </dd>

        <dt>Constructor</dt>
        <dd>
            <pre class="brush: js">
                var name = new Function(params, '...')
            </pre>
        </dd>
    </dl>
</div>

<div class="slide">
    <h1>Функции: Пример</h1>

    <pre class="brush: js">
        function makeAddFunction(amount) {
          function add(number) {
            return number + amount;
          }
          return add;
        }

        var addTwo = makeAddFunction(2);
        var addFive = makeAddFunction(5);
        show(addTwo(1) + addFive(1));
    </pre>
</div>

<div class="slide">
    <h1>Функции: Аргументы</h1>

    <ul class="incremental">
        <li>В сигнатуру функции входит только её имя, а значит, никакой перегрузки быть не может.</li>
        <li>Функция всегда возвращает значение, если оно не указано явно это будет undefined.</li>
        <li>Нет значений по умолчанию, но их можно эмулировать.
            <pre class="brush: js">
                function func(element, list, options) {
                    list = list || [];
                    options = options || {}
                }
            </pre>
        </li>
    </ul>
</div>

<div class="slide">
    <h1>Функции: Аргументы</h1>

    <p>Функции можно запускать с любым числом параметров.</p>
    <pre class="brush: js">
        function func(a,b,c) {
            console.log(a + ", " + b + ", " + c);
            console.log(arguments);
        }

        func(1, 2)       // 1, 2, undefined; {0:1, 1:2}
        func(1, 2, 3, 4) // 1, 2, 3;         {0:1, 1:2, 2:3, 3:4}
    </pre>
</div>

<div class="slide">
    <h1>Функции: API</h1>

    <dl>
        <dt>Properties</dt>
        <dd>caller, constructor, length, name</dd>
        <dt>Methods</dt>
        <dd>apply, call, toSource, toString</dd>
    </dl>
</div>

<!-- todo argument -->
<!-- todo caller/callee -->

<div class="slide">
    <h1>Curring</h1>
</div>

<!-- This -->
<div class="slide">
    <h1>This</h1>

    <dl>
        <dt>function</dt>
        <dd>
            <pre class="brush: js">
                function sayHelloTo(name) {
                    console.log(this === window);
                    alert("Hello, " + name + "!");
                }

                sayHelloTo("Alex");
            </pre>

            <p>В таком случае this === window</p>
        </dd>
    </dl>
</div>

<div class="slide">
    <h1>This</h1>

    <dl>
        <dt>method</dt>
        <dd>
            <pre class="brush: js">
                object.method = function () {
                    console.log(this == object);
                }

                object.method();
            </pre>
            <p>В таком случае this === object</p>
        </dd>
    </dl>

</div>

<div class="slide">
    <h1>This</h1>

    <dl>
        <dt>constructor</dt>
        <dd>
            <pre class="brush: js">
                var constrThis;
                function MyConstructor(name) {
                    this.name = name;

                    constrThis = this;
                }

                var obj = new MyConstructor("Name");
                console.log(obj === constrThis);
            </pre>
            <p>В таком случае this === object</p>
        </dd>
    </dl>
</div>

<div class="slide">
    <h1>This</h1>

    <dl>
        <dt>function</dt>
        <dd>this === window</dd>
        <dt>method</dt>
        <dd>this === object</dd>
        <dt>constructor</dt>
        <dd>this === new object</dd>
    </dl>
</div>

<!-- Closure introduction -->
<div class="slide">
    <h1>Example 01</h1>

    <p>Не изменяемый объект точка.</p>
    <pre class="brush: js">
        function Point(x, y) {
            return {
                getX: function() { return x; }
                getY: function() { return y; }
            }
        }

        var point = Point(5,6)
    </pre>

    <p class="incremental">Как его сделать изменяемым?</p>
</div>

<div class="slide">
    <h1>H\W 01</h1>

    <pre class="brush: js">
        function addEvents(divs) {
            for(var i=0; i &lt; divs.length; i++) {
                divs[i].innerHTML = i;
                divs[i].onclick = function() { alert(i) }
            }
        }
    </pre>

    <div id="example01">
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
    </div>

    <p class="incremental">Клик на каждый див выводит 10, почему?</p>
    <p class="incremental">Как это можно исправить?</p>
</div>

<div class="slide">
    <h1>H\W</h1>

    <ul>
        <li>01</li>
        <li>menu</li>
        <li>intuit</li>
    </ul>
</div>

</body>
</html>